<template>
  <div>
    <el-dialog v-model="props.isshow" :title="form.id ? '编辑菜单' : '添加菜单'" @close="reset">
      <el-form :model="form" ref="ruleFormRef" :rules="rules">
        <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="title">
          <el-input v-model="form.title" clearable autocomplete="off" />
        </el-form-item>
        <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="pid">
          <el-select v-model="form.pid" placeholder="请选择上级菜单" @change="select">
            <el-option label="顶级菜单" v-if="form.pid == 0 || !form.id" :value="0" />
            <el-option v-if="form.pid != 0 || !form.id" v-for="item in store.state.menu.menuList" :key="item.id"
              :label="item.title" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单名称" :label-width="formLabelWidth">
          <el-radio-group v-model="form.type" class="ml-4">
            <el-radio disabled :label="1" size="large">目录</el-radio>
            <el-radio disabled :label="2" size="large">菜单</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.type == 2" label="菜单地址" :label-width="formLabelWidth">
          <el-input v-model="form.url" clearable autocomplete="off" />
        </el-form-item>
        <el-form-item v-if="form.type == 1" label="菜单图标" :label-width="formLabelWidth">
          <el-select v-model="form.icon" placeholder="请选择菜单图标">
            <el-option v-for="item in iconArr" :key="item" :value="item">
              <el-icon>
                <component :is="item"></component>
              </el-icon>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="2" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="reset">取消</el-button>
          <el-button type="primary" @click="submit"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import mit from '../../common/myMitt';
import { useStore } from "vuex";
import { reactive, ref } from "vue";
import { menuaddedit, menuinfo } from '../../request/api';
import { ElMessage } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";

const iconArr = ["Handbag", "Setting", 'Plus', 'Minus', 'LocationInformation', 'CreditCard', 'Cpu', 'Sell', 'Goods', 'SoldOut', 'Delete', 'InfoFilled', 'UserFilled', 'Tools', 'HomeFilled', 'Menu', 'Avatar', 'Microphone']
let store = useStore();
const ruleFormRef: any = ref<FormInstance>();
let formLabelWidth = "140px";
let props = defineProps(["isshow"]);
let emit = defineEmits(["cancelDialog", 'showDialog']);
let form: any = ref({
  pid: "",
  title: "",
  type: "",
  icon: "",
  url: "",
  status: 2,
});
const rules = reactive<FormRules>({
  title: [
    { required: true, message: "请输入标题", trigger: "blur" },
    // { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  pid: [
    { required: true, message: "请选择上级菜单", trigger: "blur" },
  ],
});

function select(e: any) {
  if (e == 0) {
    form.value.type = 1;
  } else {
    form.value.type = 2;
  }
}

function reset() {
  emit("cancelDialog");
  ruleFormRef.value.resetFields();
  form.value = {
    pid: "",
    title: "",
    type: "",
    icon: "",
    url: "",
    status: 2,
  }
}

function submit() {
  ruleFormRef.value.validate((val: any) => {
    if (!val) {
      return;
    }
    let url = form.value.id ? '/menuedit' : '/menuadd';
    menuaddedit(url, form.value).then((res: any) => {
      if (res.code == 200) {
        ElMessage.success(res.msg);
        store.dispatch('menu/getMenuList');
        reset();
        return;
      }
      ElMessage.warning(res.msg);
    })
  })
}

mit.on('getInfo', (id) => {
  emit("showDialog");
  menuinfo({ id }).then((res: any) => {
    if (res.code == 200) {
      form.value = reactive({ ...res.list, id });
    }
  })
})
</script>

<style scoped>
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>